/* You can add global styles to this file, and also import other style files */
// @import "~@angular/material/prebuilt-themes/indigo-pink.css";//内建默认的，需要自定义就不用
@import "theme.scss";
@import "~angular-calendar/css/angular-calendar.css";
html,body,.site,app-root{
  width: 100%;
  height:100%;
  margin: 0;
}
.site{
  display: flex;
  flex-direction: column;
}
main{
  flex: 1;
}
.fill-remaining-space{
  flex:1 1 auto;
}

form.flex{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width:100%;
  height: 100%;
}
.example-full-width {
  width: 100%;
}
.text-algin{
  text-align: right;
  margin: 10px;
}

//dark mode css
.myapp-dark-theme{
  // color:#F7F3F6;
  // main{
  //   background-color: #020000;
  // }
  
  // .mat-toolbar{
  //   background: #2D434F;
  //   color:#8E979F;
  // }
  // .mat-slide-toggle-bar,.mat-slide-toggle-thumb{
  //   background-color:#A98200!important;
  // }
  .mat-card{
    background-color: #282628;
    color: #DDDDDE;
  }
  .mat-card-image{
    opacity: .4;
  }
  // .fab-button{
  //   background-color: #A98200;
  // }
  .mat-dialog-container{
    background-color: #343433;
    color:#DDDDDE;
  }
  // .mat-raised-button{
  //   background-color: #2D434F;
  // }
  // .mat-form-field-label{
  //   color:#4D585B!important;
  // }
  // .mat-form-field{
  //   color: darkgray;
  // }
  // .mat-input-element{
  //   caret-color:darkgray;
  // }
  // .mat-form-field.mat-focused .mat-form-field-ripple{
  //   background-color: darkgray;
  // }
  .mat-list {
    color:#F7F3F6;
    background: #282628;
    .mat-subheader{
      color:#F7F3F6;
    }
    .mat-list-item{
      color:#F7F3F6;
    }
    .mat-checkbox-frame{
      border-color:#F7F3F6;
    }
    .mat-input-element{
      color:#F7F3F6;
      &::placeholder {
        color: #F7F3F6;
        font-size: 1.5em;
      }
    }
  }
}
